<!DOCTYPE html>
<html>

<head>
    {{template "header"}}
</head>

<body>
<script>

    let deleteItem = function (ids, callback) {
        webix.confirm({
            title: gtr("Operation confirmation"),
            ok: gtr("Yes"), cancel: gtr("No"),
            text: gtr("Confirm to delete? This operation is irreversible."),
            callback: function (ev) {
                if (ev) {
                    webix.ajax().get('/admin/cwmp/presettask/delete', {ids: ids}).then(function (result) {
                        let resp = result.json();
                        webix.message({type: resp.msgtype, text: resp.msg, expire: 2000});
                        if (callback)
                            callback()
                    }).fail(function (xhr) {
                        webix.message({type: 'error', text: gtr("Delete Failure:") + xhr.statusText, expire: 2000});
                    });
                }
            }
        });
    }

    webix.ready(function () {
        let queryid = webix.uid();
        let tableid = webix.uid();
        let reloadData = wxui.reloadDataFunc(tableid, "/admin/cwmp/presettask/query", queryid)
        webix.ui({
            css: "main-panel",
            padding: 7,
            rows: [
                wxui.getPageToolbar({
                    title: tr("cwmp", "Tr069 preset tasks"),
                    icon: "mdi mdi-file-cog",
                    elements: [
                        wxui.getDangerButton(gtr("Remove"), 90, false, function () {
                            let rows = wxui.getTableCheckedIds(tableid);
                            if (rows.length === 0) {
                                webix.message({type: 'error', text: "Please select one", expire: 1500});
                            } else {
                                deleteItem(rows.join(","), reloadData);
                            }
                        }),
                    ]
                }),
                wxui.getTableQueryCustomForm(queryid, [
                    {
                        cols: [
                            {
                                view: "datepicker",
                                timepicker: true,
                                name: "starttime",
                                label: gtr("Time From"),
                                labelWidth: 80,
                                width: 240,
                                stringResult: true,
                                format: "%Y-%m-%d %H:%i",
                                css: "nborder-input",
                                value: webix.Date.add(new Date(), -8, "hour"),
                                editable: true
                            },
                            {
                                view: "datepicker",
                                timepicker: true,
                                name: "endtime",
                                label: gtr("to"),
                                labelWidth: 20,
                                stringResult: true,
                                format: "%Y-%m-%d %H:%i",
                                css: "nborder-input",
                                value: new Date(),
                                editable: true
                            },
                            {view: "search", id: "keyword", name: "keyword", placeholder: "keywords", width: 320},
                            {
                                view: "button",
                                label: "Query",
                                css: "webix_transparent",
                                type: "icon",
                                icon: "mdi mdi-search-web",
                                borderless: true,
                                width: 100,
                                click: function () {
                                    reloadData()
                                }
                            }, {}
                        ]
                    }
                ]),
                wxui.getDatatable({
                    tableid: tableid,
                    url: "/admin/cwmp/presettask/query",
                    columns: [
                        {
                            id: "state",
                            header: {content: "masterCheckbox", css: "center"},
                            headermenu: false,
                            width: 45,
                            css: "center",
                            template: "{common.checkbox()}"
                        },
                        {
                            id: "action", header: [""], adjust: true,
                            template: "<a class='prese_ttask_detail statuscss_#status#' href='javascript:void(0)'><i class='mdi mdi-eye' ></i></a>",
                        },
                        {
                            id: "status", header: [gtr("Status")], adjust: true, sort: "server",
                            template: "<span class='statuscss_#status#'>#status#</span>",
                        },
                        {
                            id: "preset_id", header: [gtr("Name")],
                            options: "/admin/cwmp/preset/options", adjust: true, sort: "server"
                        },
                        {id: "sn", header: [tr("cwmp", "SN")], adjust: true, sort: "server"},
                        {id: "oid", header: [tr("cwmp", "OID")], adjust: true, sort: "server"},
                        {id: "event", header: [tr("cwmp", "Event")], adjust: true, sort: "server"},
                        {id: "created_at", header: [gtr("Created")], adjust: true, sort: "server"},
                        {id: "exec_time", header: [tr("cwmp", "Exec time")], adjust: true, sort: "server"},
                        {id: "resp_time", header: [tr("cwmp", "Resp time")], adjust: true, sort: "server"},
                        {id: "none", header: [""], fallspace: true},
                        // {header: {content: "headerMenu"}, headermenu: false, width: 35}
                    ],
                    leftSplit: 1,
                    pager: true,
                    on: {
                        onItemDblClick: function (id, e, node) {
                            let ditem = this.getItem(id)
                            let msg = ditem.request + "\n\n" + ditem.response + "\n\nContent: \n\n" + ditem.content
                            wxui.displayTableMessage(node, this.$width - 128, 480, msg, "xml")
                        },
                    },
                    onClick: {
                        "prese_ttask_detail": function (e, id, node) {
                            let ditem = this.getItem(id)
                            let msg = ditem.request + "\n\n" + ditem.response + "\n\nContent: \n\n" + ditem.content
                            wxui.displayTableMessage(node, this.$width - 128, 480, msg, "xml")
                        }
                    }
                }),
                wxui.getTableFooterBar({
                    tableid: tableid,
                    callback: reloadData,
                    actions: [],
                }),
            ]
        })
    })
</script>
</body>

</html>